<!-- 购物车 -->
<template>
    <el-table :data="tableData" style="width: 100%" max-height="75vh" height="75vh" size="large"
        :header-cell-style="{ textAlign: 'center' }" :cell-style="{ 'text-align': 'center' }">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="name" label="商品名称" />
        <el-table-column prop="url" label="图片">
            <template #default="scope"><img :src="scope.row.url" class="image"
                    style="{height: 8px;width: 60px;}" /></template>

        </el-table-column>
        <el-table-column prop="date" label="添加时间" width="110" />
        <el-table-column prop="type" label="款式类型" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="supplierNumber" label="数量" >
            <template #default="scope">
            <el-input-number v-model="scope.row.supplierNumber" :min="1"  @change="handleChange" />
</template>
        </el-table-column>
        <el-table-column prop="tradeName" label="店家名称" width="400" />
        <el-table-column fixed="right" label="操作" align="center">

            <template #default="scope">
                <el-row class="row-bg" justify="end">
                    <el-col :span="12" class="grid-content ep-bg-purple"> <el-button type="info" size="small"
                            @click="handleEdit(scope.$index, scope.row)">修改数量</el-button></el-col>
                    <el-col :span="12" class="grid-content ep-bg-purple"><el-button size="small" type="danger"
                            @click="deleteRow(scope.$index, scope.row)">刪除商品</el-button></el-col>
                </el-row>
            </template>
        </el-table-column>
    </el-table>

    <el-row class="row-bg" height="60px"  justify="end" align="middle">
        <el-col :span="3" class="grid-content ep-bg-purple" align="middle"> <el-button size="small" type="danger" round>提交订单</el-button></el-col>
    </el-row>
</template>


<script>
import { ref } from 'vue'





const tableData = ref([
    {
        name: '三千米高硬度碳纤维鱼竿',
        date: '2016-05-03',
        type: '红色',
        price: '199999.99',
        supplierNumber: '9',
        url: "https://res.vmallres.com/cmscdn/CN/2023-10/95934334acfe4771b62f95b1e2a54aa2.jpg",
        tradeName: "比尔傲威户外旗舰店"
    },
    {
        name: 'CAPON1纯钛超轻副古商务男...',
        date: '2016-05-03',
        type: '骚粉',
        price: '199999.99',
        supplierNumber: '9',
        url: "https://res.vmallres.com/cmscdn/CN/2023-10/95934334acfe4771b62f95b1e2a54aa2.jpg",
        tradeName: "CAPON1官方旗舰店"
    },
    {
        name: '三千米高硬度碳纤维鱼竿',
        date: '2016-05-03',
        type: '红色',
        price: '199999.99',
        supplierNumber: '9',
        url: "https://res.vmallres.com/cmscdn/CN/2023-10/95934334acfe4771b62f95b1e2a54aa2.jpg",
        tradeName: "比尔傲威户外旗舰店"
    },
    {
        name: '三千米高硬度碳纤维鱼竿',
        date: '2016-05-03',
        type: '红色',
        price: '199999.99',
        supplierNumber: '9',
        url: "https://res.vmallres.com/cmscdn/CN/2023-10/95934334acfe4771b62f95b1e2a54aa2.jpg",
        tradeName: "比尔傲威户外旗舰店"
    },
])










export default {
    name: 'Normal',
    props: {
        msg: String,
    },
    data() {
        return {
            tableData: tableData
        }
    },

    methods: {
        deleteRow(index) {

            tableData.value.splice(index, 1)
        },
        onAddItem() {

            tableData.value.push({
                date: this.getCurrentDate(),
                name: '三千米高硬度碳纤维鱼竿',
                date: this.getCurrentDate(),
                type: '红色',
                price: '199999.99',
                supplierNumber: '9',
                tradeName: "比尔傲威户外旗舰店"
            })
        },
        handleEdit(index, row) {
            console.log(row)

            row.supplierNumber = row.supplierNumber + 1

        },
        getCurrentDate() {
            let now = new Date();
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let day = now.getDate();
            return year + "年" + month + "月" + day + '日';
        }
    }
}
const goBack = () => {
    console.log('go back')
}

</script>